<template>
    <!--  以70个为基数，实际只有69，多一个隐藏-->
    <template v-if="data.index !== 70">
        <div class="rounded-lg p-1 grid grid-cols-7 gap-2 border border-slate-300 box-border shadow-md shadow-slate-400/50 "
            :class="`h-full rounded-lg ${data.isRecommend ? ' my-active-bg my-animate-pause' : ''}`">

            <div class="col-span-2 flex justify-center items-center" style="flex-direction: column">
                <div
                    :class="`${data.isRecommend ? 'animate-bounce' : ''} rounded-full border-2  w-10 h-10 outline-double outline-3 outline-offset-2  ${(data.percentage || 0) >= 100 ? 'outline-red-600 border-red-100 text-red-400' : 'outline-blue-500 border-indigo-100 text-violet-700'}`">
                    <p class="  leading-[2.5rem] font-mono  font-bold text-2xl text-center ">{{ data.index }}</p>
                </div>
                <!-- 已占用  -->
                <div class=" border  border-gray-200/50 flex  justify-center items-center mt-1">
                    <span class="text-xs " style="font-size: 11px;">{{ $t('fgLocation.occupideQty2') }}:</span>
                    <span class="text-blue-600">{{ data.usedInventory || 0 }}</span>
                </div>
            </div>
            <!-- 占用的时候显示 -->
            <div class="col-span-5">
                <div class="grid grid-cols-2  h-full text-sm  rounded-2xl">
                    <el-badge :value="data.status != 'outStock' ? '' : 'out'" class="item"
                        style="position:relative;top:-6px;left: 13px;padding: 0">
                        <div class="border  border-gray-200/50 flex font-sans font-bold justify-center items-center"
                            style="position:absolute;top: 6px;left:-17px;">
                            {{ data.locationCode || '--' }}
                        </div>
                    </el-badge>
                    <div class="border  border-gray-200/50 flex font-mono justify-center items-center">
                        {{ data.materialCode || '--' }}
                    </div>
                    <div class="col-span-2">
                        <el-progress :percentage="data.percentage?.toFixed(2) || 0" :color="customColors">
                            <template #default>
                                <div style="color: #f56c6c;" v-if="data.percentage >= 100">{{ '100%' }}</div>
                                <div style="" v-else>{{ data.palletSize===48?data.percentage?.toFixed(2) + '%' : data.percentage2?.toFixed(2) + '%'}}</div>
                            </template>
                        </el-progress>
                    </div>
                    <div class="flex flex-wrap w-full" style="width: 200%;" >
                        <!-- 容量占用后只显示其中一个。且名字叫容量 -->
                        <!--  最大最小剩余容量   -->
                      <template v-if="data.usedInventory ===0">
                        <div class="border  border-gray-200/50 flex  items-center w-full pr-2"  >
                          <span class="text-xs mr-2" style="color: #444;">{{ $t('fgLocation.max')}}:</span>
                          <span class="text-blue-600 text-xs">{{ data.maxCapacity || 0 }}</span>
                        </div>
                        <div class="border  border-gray-200/50 flex  items-center w-full pr-2" >
                          <span class="text-xs mr-2" style="color: #444;">{{ $t('fgLocation.min')}}:</span>
                          <span class="text-blue-600 text-xs">{{ data.minCapacity || 0 }}</span>
                        </div>
                      </template>
                      <template v-else>
                        <div class="border  border-gray-200/50 flex  items-center w-full pr-2" v-if="data.palletSize===48" >
                          <span class="text-xs mr-2" style="color: #444;">{{ $t('fgLocation.max')}}:</span>
                          <span class="text-blue-600 text-xs">{{ data.maxCapacity || 0 }}</span>
                        </div>
                        <div class="border  border-gray-200/50 flex  items-center w-full pr-2" v-else>
                          <span class="text-xs mr-2" style="color: #444;">{{ $t('fgLocation.min')}}:</span>
                          <span class="text-blue-600 text-xs">{{ data.minCapacity || 0 }}</span>
                        </div>
                      </template>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <template v-else>
      <div></div>
    </template>
</template>

<script setup>
import { defineProps } from 'vue'

import { customColors } from './data'

const props = defineProps({
    data: {
        required: false
    }
})
</script>

<style scoped>
.my-active-bg {
    background: rgba(66, 215, 155, 1)
}

.my-animate-pause {
    animation: my-active-bg-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

@keyframes my-active-bg-pulse {

    0%,
    100% {
        background-color: rgba(74, 222, 128, 1);
    }

    50% {
        background-color: rgba(74, 222, 128, 0.5);
    }
}
</style>
